<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>


<f:view>
    <a4j:keepAlive beanName="contactsBean"/>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>EvIn | Contacts</title>
            <link rel="stylesheet" href="/EvIn/styles/styles.css" type="text/css" />
        </head>

        <body>

            <div id="wrapper">
                <div class="header">
                    <jsp:include page="/common/header.jsp"></jsp:include>
                </div>
                <div class="fullpane">
                    <div class="leftpane">
                        <jsp:include page="/common/main_menu.jsp"></jsp:include>
                    </div>

                    <div class="rightpane" >

                        <div class="contentTitle">
							Contacts
                        </div>
                        <br/>
                        <br/>
                        <div style="float:left">
									Import contacts<br/>
                            <a href="/EvIn/ImportFromGmail" title="Import contacts from Gmail" ><img src="/EvIn/static/images/gmail.png" height="24px"/></a>
                            <a href="/EvIn/user/yahooimport.faces" title="Import contacts from Yahoo!" ><img src="/EvIn/static/images/yahoo_logo.png" height="24px"/></a>
                            <a href="/EvIn/user/facebookimportinfo.faces" title="Import contacts from Facebook" ><img src="/EvIn/static/images/facebook_logo.png" height="24px"/></a>
                        </div>
                        <div style="float:right">
                            <br/>
                            <h:form>
                                <a4j:commandLink value="+ Add New Contact" oncomplete="Richfaces.showModalPanel('new_contact_panel');" reRender="new_contact_panel">
                                    <f:setPropertyActionListener value="#{registeredUserBean.registeredUser}" target="#{contactsBean.prepareNewContact}"/>
                                </a4j:commandLink>
                            </h:form>
                        </div>
                        <br/>
                        <br/>
                        <h:form id="forma1" style="clear:both">
                            <rich:dataTable align="center" style="text-align:center;width:100%" id="contacts_table" value="#{registeredUserBean.nonDeletedContacts}" var="contact" ajaxKeys="">
                                <rich:column sortBy="#{contact.email}" >
                                    <f:facet name="header"><h:outputText value="Email"/></f:facet>
                                    <h:outputText value="#{contact.email}"/>
                                </rich:column>
                                <rich:column sortBy="#{contact.lastName}" >
                                    <f:facet name="header"><h:outputText value="Last Name"/></f:facet>
                                    <h:outputText value="#{contact.lastName}"/>
                                </rich:column>
                                <rich:column sortBy="#{contact.firstName}" >
                                    <f:facet name="header"><h:outputText value="First Name"/></f:facet>
                                    <h:outputText value="#{contact.firstName}"/>
                                </rich:column>
                                <rich:column>
                                    <f:facet name="header"><h:outputText value="Action"/></f:facet>
                                    <a4j:commandLink
                                        value="Edit"
                                        oncomplete="Richfaces.showModalPanel('edit_contact_panel');"
                                        reRender="edit_contact_panel"
                                        >
                                        <f:setPropertyActionListener value="#{contact}" target="#{contactsBean.editContact}"/>
                                    </a4j:commandLink>
                                    &nbsp;
                                    <a4j:commandLink
                                        value="Delete"
                                        reRender="forma1,contacts_table"
                                        >
                                        <f:setPropertyActionListener value="#{contact}" target="#{contactsBean.deleteContact}"/>
                                    </a4j:commandLink>

                                </rich:column>

                            </rich:dataTable>
                        </h:form>

                        <rich:modalPanel id="edit_contact_panel" autosized="true" minWidth="400">
                            <f:facet name="header">
                                <h:outputText value="Edit Contact" />
                            </f:facet>
                            <f:facet name="controls">
                                <h:form id="close_form1">
                                    <h:commandLink  onclick="Richfaces.hideModalPanel('edit_contact_panel'); return false;" value="Close"/>
                                </h:form>
                            </f:facet>
                            <div align="center">
                                <br/>
                                <h:form id="forma2" >
                                    <h:panelGrid columns="3">
                                        <h:outputLabel for="email" value="Email :  " />
                                        <h:inputText  required="true" id="email"  value="#{contactsBean.selectedContact.email}" requiredMessage="Email is required">
                                            <f:validator validatorId="EmailValidator" />
                                        </h:inputText>
                                        <h:message  for="email" style="color: red; font-size: 10px"/>

                                        <h:outputLabel for="first_name" value="First Name :  " />
                                        <h:inputText  required="true" id="first_name"  value="#{contactsBean.selectedContact.firstName}" requiredMessage="Fist name is required">
                                        </h:inputText>
                                        <h:message  for="first_name" style="color: red; font-size: 10px"/>

                                        <h:outputLabel for="last_name" value="Last Name :  " />
                                        <h:inputText  required="true" id="last_name"  value="#{contactsBean.selectedContact.lastName}" requiredMessage="Last name is required">
                                        </h:inputText>
                                        <h:message  for="last_name" style="color: red; font-size: 10px"/>
                                        <br/><br/><br/>
                                        <h:panelGroup>
                                            <div style="text-align: right">
                                                <a4j:commandLink action="#{contactsBean.saveContact}" oncomplete="if (#{facesContext.maximumSeverity==null})Richfaces.hideModalPanel('edit_contact_panel');" reRender="forma1,forma2" > Save </a4j:commandLink>
                                            </div>
                                        </h:panelGroup>
                                    </h:panelGrid>
                                </h:form>
                            </div>
                        </rich:modalPanel>

                        <rich:modalPanel id="new_contact_panel" autosized="true" minWidth="400">
                            <f:facet name="header">
                                <h:outputText value="New Contact" />
                            </f:facet>
                            <f:facet name="controls">
                                <h:form id="close_form_2">
                                    <h:commandLink value="Close" onclick="Richfaces.hideModalPanel('new_contact_panel');return false;"/>
                                </h:form>
                            </f:facet>

                            <div align="center">
                                <br/>
                                <h:form id="new_contact_form">
                                    <h:panelGrid columns="3">
                                        <h:outputLabel for="email" value="Email :  " />
                                        <h:inputText  required="true" id="email"  value="#{contactsBean.newContact.email}" requiredMessage="Email is required">
                                            <f:validator validatorId="EmailValidator" />
                                        </h:inputText>
                                        <h:message  for="email" style="color: red; font-size: 10px"/>

                                        <h:outputLabel for="first_name" value="First Name :  " />
                                        <h:inputText  required="true" id="first_name"  value="#{contactsBean.newContact.firstName}" requiredMessage="Fist name is required">
                                        </h:inputText>
                                        <h:message  for="first_name" style="color: red; font-size: 10px"/>

                                        <h:outputLabel for="last_name" value="Last Name :  " />
                                        <h:inputText  required="true" id="last_name"  value="#{contactsBean.newContact.lastName}" requiredMessage="Last name is required">
                                        </h:inputText>
                                        <h:message  for="last_name" style="color: red; font-size: 10px"/>
                                        <br/><br/><br/>
                                        <h:panelGroup>
                                            <a4j:commandLink action="#{contactsBean.saveNewContactAddAnother}" reRender="forma1,new_contact_form" > Save and add another </a4j:commandLink>
                                            <a4j:commandLink action="#{contactsBean.saveNewContact}" oncomplete="if (#{facesContext.maximumSeverity==null})Richfaces.hideModalPanel('new_contact_panel');" reRender="forma1,new_contact_form" > Save </a4j:commandLink>
                                        </h:panelGroup>
                                    </h:panelGrid>
                                </h:form>
                            </div>
                        </rich:modalPanel>
                    </div>
                </div>
            </div>
        </body>
    </html>

</f:view>

